<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="css/index.css">

    <script src="js/animate.js"></script>

    <script src="js/index.js"></script>
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    <script src="/res/Home/cssjs/jquery.flexslider-min.js"></script>
</head>

<script type="text/javascript">
    $(function() {
        $(".flexslider").flexslider({
        animation: "slide", 
        slideshowSpeed: 5000,
        animationDuration: 10
        });
    })	
  </script>
<body>
<div class="hid_show"><img src="images/4.png"></div>


<div class="flexslider" id='slider' style="display: block;">
    <a href="javascript:;" class="arrow-l">
                    &lt;
     </a>
  
    <a href="javascript:;" class="arrow-r"> &gt; </a>

    <ul>

            <li>
                <a href="#"><img src="images/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="images/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="images/3.jpg" alt=""></a>
            </li>
    </ul>

<ol class="circle">
</ol>
</div>
<script>var flag = 1;
  
    $(".hid_show").click(function(){   $(".flexslider").slideToggle();
        if(flag==0){
            $(this).html("<img src='images/4.png'>");
            flag = 1;
       

        }else{
            $(this).html("<img src='images/5.png'>");
            flag = 0;
         
        }
        
    });</script>

</body>

</html>